<!DOCTYPE html>
<html>
	<head>
		<title>CSS Reftest Reference</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<style>
		ul, ol {
			margin: 0;
		}
		.ordered {
			list-style-type: lower-latin;
		}
		.unordered {
			list-style-type: circle;
		}
		.container {
			color: #006400;
			background-color: lightgreen;
			margin: 2em;
			float: left;
			width: 15em;
		}
		.region {
			color: blue;
			margin: 2em;
			background-color: lightblue;
			float: left;
			width: 15em;
		}

		.region > ul,
		.region > ol {
			padding: 0;
			margin: 0;
		}
		.hide {
			visibility: hidden;
			height: 0;
		}
		</style>
	</head>
	<body>
		<p>Test passes if you see two rectangles, one green and one blue, as described below.</p>
		<p>The green rectangle should contain a list with items numbered/marked as such: the <strong>first two items</strong> should be numbered with small latin letters, starting with d. The <strong>next three items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>inside</em> the green rectangle.</p>
		<p>The blue rectangle should contain a list with items numbered/marked as such: the <strong>first three items</strong> should be numbered with small latin letters, starting with a. The <strong>next two items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>outside</em> the blue rectangle.</p>
		
		<div class="container">
			<ul class="ordered" start="4">
				<li class="hide"></li>
				<li class="hide"></li>
				<li class="hide"></li>
				<li>Ordered list, item d</li>
				<li>Ordered list, item e</li>
			</ul>
			<ol class="unordered">
				<li>Unordered list, item 1</li>
				<li>Unordered list, item 2</li>
				<li>Unordered list, item 3</li>
			</ol>
		</div>
		<div class="region" id="r1">
			<ul class="ordered">
				<li>Ordered list, item a</li>
				<li>Ordered list, item b</li>
				<li>Ordered list, item c</li>
			</ul>
			<ol class="unordered">
				<li>Unordered list, item 4</li>
				<li>Unordered list, item 5</li>
			</ol>
		</div>
	</body>
</html>